<!DOCTYPE HTML>

<html>

<head>
	<title>王志超博客</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
	<link rel="stylesheet" href="assets/css/main.css" />
	<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
	<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
	<link rel="shortcut icon" type="image/x-icon" href="images/magic.jpg">
</head>

<body class="landing">

		<canvas id="c" style="    position: fixed;
		top: 50%;
		left: 50%;
		transform: translateY(-50%) translateX(-50%);z-index: 9999;"></canvas>


	<script src="assets/js/prefixfree.min.js"></script>
	<script src="assets/js/index.js"></script>


	<!-- Page Wrapper -->
	<div id="page-wrapper">

		<!-- Header -->
		<header id="header" class="alt">
			<h1>
				<a href="index.html">王志超博客</a>
			</h1>
			<nav id="nav">
				<ul>
					<li class="special">
						<a href="#menu" class="menuToggle">
							<span>MENU</span>
						</a>
						<div id="menu">
							<ul>
								<li>
									<a href="index.html">主页</a>
								</li>
								<li>
									<a href="#two">文章</a>
								</li>
								<li>
									<a href="#">Elements</a>
								</li>
								<li>
									<a href="#">Sign Up</a>
								</li>
								<li>
									<a href="#">联系我</a>
								</li>
							</ul>
						</div>
					</li>
				</ul>
			</nav>
		</header>

		<!-- Banner -->
		<section id="banner">
			<div class="inner">
				<h2>用心学习，用脚编程</h2>
				<p>html + Css
					<br /> js + Vue + Angular
					<br /> Write by
					<a href="https://www.cnblogs.com/wangzhichao/" target="_black">wangzhichao</a>.</p>
				<ul class="actions">
					<li>
						<a href="https://github.com/wzc570738205" target="_black" class="button special" id="github" title="Follow me on github">
							<svg height="32" class="octicon octicon-mark-github" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true">
								<path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path>
							</svg>&nbsp;&nbsp;Github</a>
					</li>
					<li>
						<a href="https://www.cnblogs.com/wangzhichao/" target="_black" class="button special" id="github" title="Follow me on github">
							<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" t="1523958183616" class="icon"
							 style="" viewBox="0 0 1024 1024" version="1.1" p-id="1329" width="32" height="32">
								<defs>
									<style type="text/css" />
									</defs>
								<path d="M479.636407 0.102331c-264.794805 0-479.514121 214.688617-479.514121 479.513098 0 264.793782 214.719316 479.513098 479.514121 479.513098 264.794805 0 479.513098-214.719316 479.513098-479.513098C959.150528 214.790948 744.432235 0.102331 479.636407 0.102331zM479.636407 895.194402c-229.517347 0-415.578973-186.061626-415.578973-415.578973 0-229.550093 186.061626-415.57795 415.578973-415.57795 229.517347 0 415.578973 186.02888 415.578973 415.57795C895.21538 709.132776 709.153754 895.194402 479.636407 895.194402z"
								    p-id="1330" fill="#000000" />
								<path d="M578.412061 466.378963c19.354813-9.520841 33.716916-22.040992 43.394323-37.588083 9.425673-15.607466 14.234189-32.090882 14.234189-49.822732 0-18.857487-5.370311-36.992519-16.169261-54.257741-10.740622-17.389042-25.664519-30.188556-44.645826-38.554084-19.040658-8.30413-44.26618-12.487406-75.67247-12.487406L344.960101 273.668916l0 411.864372 157.091828 0c26.161846 0 48.327682-2.310625 66.494437-6.80601 17.981537-4.621251 33.029254-11.42419 45.017286-20.415982 11.988032-8.930393 22.040992-21.727861 30.219255-38.337143 8.116865-16.607236 12.173251-34.464953 12.173251-53.788044 0-23.976064-6.67912-44.7676-20.042475-62.46875C622.491998 486.202451 603.387895 473.745744 578.412061 466.378963zM399.468552 322.338383l82.294284 0c29.590945 0 50.508347 1.840928 62.746066 5.680373 12.113899 3.839445 21.539572 10.92584 28.033473 21.352307 6.619768 10.366092 9.867742 22.447245 9.867742 36.119639 0 14.391778-3.560082 26.412556-10.553357 35.933397-7.055696 9.613962-17.482163 16.452717-31.344892 20.541849-10.488889 3.184529-27.721365 4.77577-51.946093 4.77577l-89.098247 0L399.467529 322.338383zM591.399863 600.869027c-5.494131 9.990538-12.300141 17.605983-20.853957 22.850427-8.366551 5.244444-18.918885 8.990768-31.406291 11.237949-7.179516 1.375324-19.543102 1.998517-37.086663 1.998517L399.468552 636.95592l0-141.543713 95.281063 0c26.158776 0 46.26265 2.24718 60.311621 6.836709 13.862729 4.526083 24.789593 12.517081 32.653701 23.849174 7.868201 11.363815 11.80179 24.725124 11.80179 40.085974C599.515704 579.264986 596.768127 590.878488 591.399863 600.869027z"
								    p-id="1331" fill="#000000" />
							</svg>&nbsp;&nbsp;Cnblog</a>
					</li>
				</ul>
			</div>
			<a href="#two" class="more scrolly">查看更多</a>
		</section>

		<!-- One -->
		<!-- <section id="one" class="wrapper style1 special">
                        <div class="inner">
                            <header class="major">
                                <h2>Arcu aliquet vel lobortis ata nisl<br />
                                eget augue amet aliquet nisl cep donec</h2>
                                <p>Aliquam ut ex ut augue consectetur interdum. Donec amet imperdiet eleifend<br />
                                fringilla tincidunt. Nullam dui leo Aenean mi ligula, rhoncus ullamcorper.</p>
                            </header>
                            <ul class="icons major">
                                <li><span class="icon fa-diamond major style1"><span class="label">Lorem</span></span></li>
                                <li><span class="icon fa-heart-o major style2"><span class="label">Ipsum</span></span></li>
                                <li><span class="icon fa-code major style3"><span class="label">Dolor</span></span></li>
                            </ul>
                        </div>
                    </section> -->
		<!-- Two -->
		<section id="two" class="wrapper alt style2">

<a href="demo/sharePassword.html" target="_black">
					<section class="spotlight">
						<div class="image">
							<img src="images/2016-09-06-09-09-07.png" alt="" />
						</div>
						<div class="content">
							<h2>粒子背景
								<br /> 
							</h2>
							<time>2018/07/20</time>
							<p></p>
						</div>
					</section>
				</a>


			<a href="smartparse.html" target="_black">
					<section class="spotlight">
						<div class="image">
							<img src="https://app.yinxiang.com/shard/s72/res/e9ecb5ac-fd4c-4f54-b2f3-fe23ca09737c.png" alt="" />
						</div>
						<div class="content">
							<h2>气泡背景
								<br /> 
							</h2>
							<time>2018/07/03</time>
							<p></p>
						</div>
					</section>
				</a>
				<!-- <a href="article/movie/index.html" target="_black">
					<section class="spotlight">
						<div class="image">
							<img src="article/Weddingphotos/img/w2.jpg" alt="" />
						</div>
						<div class="content">
							<h2>美美的婚纱
								<br /> 
							</h2>
							<time>2018/05/20</time>
							<p></p>
						</div>
					</section>
				</a> -->
			<a href="article/正则验证/index.html" target="_black">
				<section class="spotlight">
					<div class="image">
						<img src="article/正则验证/QQ截图20180503160047.png" alt="" />
					</div>
					<div class="content">
						<h2>最方便的正则验证
							<br /> /^wzc%/g
						</h2>
						<time>2018/05/03</time>
						<p></p>
					</div>
				</section>
			</a>
			<a href="article/weichat/index.html" target="_black">
				<section class="spotlight">
					<div class="image" style="    background-color: rgba(0, 0, 0, 0.3);">
						<img src="article/weichat/img/endAvatar.png" alt="" />
					</div>
					<div class="content">
						<h2>微信小场景制作
							<br /> swiper&&animate
						</h2>
						<time>2018/05/02</time>
						<p></p>
					</div>
				</section>
			</a>
			<a href="article/generic.html" target="_black">
				<section class="spotlight" style="    background-color: rgba(0, 0, 0, 0.3);">
					<div class="image">
						<img src="images/w1/640 (28).jpg" alt="" />
					</div>
					<div class="content">
						<h2>对文艺程序员的一次访谈
						</h2>
						<time>2018/4/16</time>
						<p>对一位资深程序员就工作生活问题进行了深度采访，采访内容如下：..</p>
					</div>
				</section>
			</a>
			<a href="article/evanyou彩带.html" target="_black">
				<section class="spotlight">

					<div class="image">
						<img src="images/640.gif" alt="" />
					</div>
					<div class="content">
						<h2>evanyou 效果-彩带的实现
							<br /> 基于Canvas
						</h2>
						<time>2018/4/16</time>
						<p>主要用的是 Canvas 画布实现的，点击背景绘制新的图形</p>
					</div>
				</section>
			</a>

			<section class="spotlight">
				<div class="image">
					<img src="images/pic03.jpg" alt="" />
				</div>
				<div class="content">
					<h2>Augue eleifend aliquet
						<br /> sed condimentum</h2>
					<p>Aliquam ut ex ut augue consectetur interdum. Donec hendrerit imperdiet. Mauris eleifend fringilla nullam aenean mi ligula.</p>
				</div>
			</section>
		</section>

		<!-- Three -->
		<section id="three" class="wrapper style3 special">
			<div class="inner">
				<header class="major">
					<h2>Accumsan mus tortor nunc aliquet</h2>
					<p>Aliquam ut ex ut augue consectetur interdum. Donec amet imperdiet eleifend
						<br /> fringilla tincidunt. Nullam dui leo Aenean mi ligula, rhoncus ullamcorper.</p>
				</header>
				<ul class="features">
					<li class="icon fa-paper-plane-o">
						<h3>Arcu accumsan</h3>
						<p>Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat.</p>
					</li>
					<li class="icon fa-laptop">
						<h3>Ac Augue Eget</h3>
						<p>Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat.</p>
					</li>
					<li class="icon fa-code">
						<h3>Mus Scelerisque</h3>
						<p>Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat.</p>
					</li>
					<li class="icon fa-headphones">
						<h3>Mauris Imperdiet</h3>
						<p>Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat.</p>
					</li>
					<li class="icon fa-heart-o">
						<h3>Aenean Primis</h3>
						<p>Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat.</p>
					</li>
					<li class="icon fa-flag-o">
						<h3>Tortor Ut</h3>
						<p>Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat.</p>
					</li>
				</ul>
			</div>
		</section>

		<!-- CTA -->
		<section id="cta" class="wrapper style4">
			<div class="inner">
				<header>
					<h2>Arcue ut vel commodo</h2>
					<p>Aliquam ut ex ut augue consectetur interdum endrerit imperdiet amet eleifend fringilla.</p>
				</header>
				<ul class="actions vertical">
					<li>
						<a href="#" class="button fit special">Activate</a>
					</li>
					<li>
						<a href="#" class="button fit">Learn More</a>
					</li>
				</ul>
			</div>
		</section>

		<!-- Footer -->
		<footer id="footer">
			<ul class="icons">
				<li>
					<a href="#" class="icon fa-twitter">
						<span class="label">Twitter</span>
					</a>
				</li>
				<li>
					<a href="#" class="icon fa-facebook">
						<span class="label">Facebook</span>
					</a>
				</li>
				<li>
					<a href="#" class="icon fa-instagram">
						<span class="label">Instagram</span>
					</a>
				</li>
				<li>
					<a href="#" class="icon fa-dribbble">
						<span class="label">Dribbble</span>
					</a>
				</li>
				<li>
					<a href="#" class="icon fa-envelope-o">
						<span class="label">Email</span>
					</a>
				</li>
			</ul>
		</footer>

	</div>

	<!-- Scripts -->
	<script src="assets/js/jquery.min.js"></script>
	<script src="assets/js/jquery.scrollex.min.js"></script>
	<script src="assets/js/jquery.scrolly.min.js"></script>
	<script src="assets/js/skel.min.js"></script>
	<script src="assets/js/util.js"></script>
	<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
	<script src="assets/js/main.js"></script>
	<script>
		/*    function GetNextMonthDay(date, monthNum)
				{
				 var dateArr = date.split('-');
				 var year = dateArr[0]; //获取当前日期的年份
				 var month = dateArr[1]; //获取当前日期的月份
				 var day = dateArr[2]; //获取当前日期的日
				 var days = new Date(year, month, 0);
				 days = days.getDate(); //获取当前日期中的月的天数
				 var year2 = year;
				 var month2 = parseInt(month) + parseInt(monthNum);
				 if (month2 >12) {
				  year2 = parseInt(year2) + parseInt((parseInt(month2) / 12 == 0 ? 1 : parseInt(month2) / 12));
				  month2 = parseInt(month2) % 12;
				 }
				 var day2 = day;
				 var days2 = new Date(year2, month2, 0);
				 days2 = days2.getDate();
				 if (day2 > days2) {
				  day2 = days2;
				 }
				 if (month2 < 10) {
				  month2 = '0' + month2;
				 }
				 
				 var t2 = year2 + '-' + month2 + '-' + day2;
				 return t2;
				}
				console.log(GetNextMonthDay('2018-03-31', 1));*/
				document.onreadystatechange = () => {
					if(document.readyState ==='loading'){
        $('#page-wrapper').hide()
				}
				if(document.readyState ==='complete'){
					$('#page-wrapper').show()
					$('#c').hide()
					
				}
};
				
				
	</script>
</body>

</html>